import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'index.dart';
import '../../../common/values/images.dart';
import '../../../common/utils/index.dart';

class HomeIndexPage extends GetView<HomeIndexController> {
  const HomeIndexPage({super.key});

  // 现代化配色系统
  static const Color _backgroundColor = Color(0xFFF8F9FA);
  static const Color _textPrimary = Color(0xFF333333);
  
  // 渐变色定义
  static const LinearGradient _primaryGradient = LinearGradient(
    colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
  );
  
  static const LinearGradient _blueGradient = LinearGradient(
    colors: [Color(0xFF4FC3F7), Color(0xFF29B6F6)],
  );
  
  static const LinearGradient _greenGradient = LinearGradient(
    colors: [Color(0xFF66BB6A), Color(0xFF4CAF50)],
  );
  
  static const LinearGradient _purpleGradient = LinearGradient(
    colors: [Color(0xFFAB47BC), Color(0xFF8E24AA)],
  );

  // 构建时间信息 - 两行显示（竖屏）
  Widget _buildTimeInfoTwoRows() {
    return Obx(() => Column(
      children: [
        // 第一行：日期信息
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 日历图标
            Container(
              padding: EdgeInsets.all(6.r),
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.25),
                borderRadius: BorderRadius.circular(7.r),
              ),
              child: Icon(
                Icons.calendar_today_rounded,
                color: Colors.white,
                size: 14.r,
              ),
            ),
            SizedBox(width: 8.w),
            Text(
              '${controller.formattedDate} ${controller.weekDay}',
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.white,
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        ),
        
        SizedBox(height: 10.h),  // 两行之间的间距
        
        // 第二行：时间信息
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 时钟图标
            Container(
              padding: EdgeInsets.all(6.r),
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.25),
                borderRadius: BorderRadius.circular(7.r),
              ),
              child: Icon(
                Icons.access_time_rounded,
                color: Colors.white,
                size: 14.r,
              ),
            ),
            SizedBox(width: 8.w),
            Text(
              '${controller.formattedTime} ${controller.timePeriod}',
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.white,
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        ),
      ],
    ));
  }

  // 构建时间信息 - 单行显示（横屏）- 紧凑版
  Widget _buildTimeInfoSingleRow() {
    return Obx(() => Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 日历图标
        Container(
          padding: EdgeInsets.all(4.r),  // 缩小padding
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.25),
            borderRadius: BorderRadius.circular(5.r),  // 缩小圆角
          ),
          child: Icon(
            Icons.calendar_today_rounded,
            color: Colors.white,
            size: 10.r,  // 缩小图标
          ),
        ),
        SizedBox(width: 5.w),  // 减少间距
        Text(
          '${controller.formattedDate} ${controller.weekDay}',
          style: TextStyle(
            fontSize: 11.sp,  // 缩小字体
            color: Colors.white,
            fontWeight: FontWeight.w600,
          ),
        ),
        
        SizedBox(width: 10.w),  // 日期和时间之间的分隔
        
        // 分隔线
        Container(
          width: 1,
          height: 12.h,  // 缩小高度
          color: Colors.white.withOpacity(0.3),
        ),
        
        SizedBox(width: 10.w),
        
        // 时钟图标
        Container(
          padding: EdgeInsets.all(4.r),  // 缩小padding
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.25),
            borderRadius: BorderRadius.circular(5.r),  // 缩小圆角
          ),
          child: Icon(
            Icons.access_time_rounded,
            color: Colors.white,
            size: 10.r,  // 缩小图标
          ),
        ),
        SizedBox(width: 5.w),  // 减少间距
        Text(
          '${controller.formattedTime} ${controller.timePeriod}',
          style: TextStyle(
            fontSize: 11.sp,  // 缩小字体
            color: Colors.white,
            fontWeight: FontWeight.w600,
          ),
        ),
      ],
    ));
  }

  // 构建专家副标题（处理null显示问题）
  String _buildExpertSubtitle() {
    final corpName = controller.expertCorpName;
    final capacity = controller.expertOfficialCapacity;
    
    // 判断职务是否有效（不为空、不为'null'、不为'未设置'）
    final hasValidCapacity = capacity.isNotEmpty && 
                             capacity != 'null' && 
                             capacity != '未设置';
    
    // 判断机构名是否有效
    final hasValidCorpName = corpName.isNotEmpty && 
                             corpName != 'null' && 
                             corpName != '未设置';
    
    if (hasValidCorpName && hasValidCapacity) {
      return '$corpName · $capacity';
    } else if (hasValidCorpName) {
      return corpName;
    } else if (hasValidCapacity) {
      return capacity;
    } else {
      return '专家';
    }
  }

  // 构建头部专家信息区域（透明叠层设计 - 与状态栏融为一体，支持横屏）
  Widget _buildWelcomeHeader() {
    return OrientationBuilder(
      builder: (context, orientation) {
        // 获取状态栏高度
        final statusBarHeight = MediaQuery.of(context).padding.top;
        // 🔥 检测是否为横屏模式
        final isLandscape = orientation == Orientation.landscape;
        
        // 📱 打印横屏状态日志
        debugPrint('🔄 首页屏幕方向: ${isLandscape ? "横屏" : "竖屏"} (Orientation.${orientation.name})');
        debugPrint('📐 屏幕尺寸: ${MediaQuery.of(context).size.width} x ${MediaQuery.of(context).size.height}');
        
        return Container(
          width: double.infinity,
          // 动态计算顶部padding，只为状态栏留出空间
          padding: EdgeInsets.only(
            top: statusBarHeight + (isLandscape ? 6.h : 16.h),   // 横屏时大幅减少顶部间距
            bottom: isLandscape ? 12.h : 32.h,  // 横屏时大幅减少底部间距
            left: isLandscape ? 32.w : 24.w,    // 横屏时增加左右边距
            right: isLandscape ? 32.w : 24.w,
          ),
          decoration: BoxDecoration(
            gradient: _primaryGradient,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(24.r),   // ✅ 使用 .r 适配
              bottomRight: Radius.circular(24.r),  // ✅ 使用 .r 适配
            ),
            boxShadow: [
              BoxShadow(
                color: const Color(0xFFD84545).withOpacity(0.3),
                blurRadius: 15.r,
                spreadRadius: 0,
                offset: Offset(0, 5.h),
              ),
            ],
          ),
          child: Column(
            children: [
              // 顶部标题栏：标题 + 退出按钮
              Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 标题 - 横屏时缩小或隐藏
              if (!isLandscape)
                Text(
                  "中国音乐学院在线评审",
                  style: TextStyle(
                    fontSize: 18.sp,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              // 退出登录按钮 - 横屏时缩小
              Obx(() => TextButton(
                onPressed: controller.isLoggingOut.value 
                    ? null 
                    : controller.onLogoutTap,
                style: TextButton.styleFrom(
                  backgroundColor: Colors.white.withOpacity(0.2),
                  foregroundColor: Colors.white,
                  padding: EdgeInsets.symmetric(
                    horizontal: isLandscape ? 10.w : 16.w,  // 横屏时减少padding
                    vertical: isLandscape ? 4.h : 8.h,      // 横屏时减少padding
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(isLandscape ? 6.r : 8.r),
                  ),
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  minimumSize: Size(isLandscape ? 50.w : 60.w, isLandscape ? 24.h : 32.h),
                ),
                child: controller.isLoggingOut.value
                    ? SizedBox(
                        width: isLandscape ? 12.w : 16.w,   // 横屏时缩小
                        height: isLandscape ? 12.w : 16.w,
                        child: const CircularProgressIndicator(
                          strokeWidth: 2,
                          valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                        ),
                      )
                    : Text(
                        '退出登录',
                        style: TextStyle(
                          fontSize: isLandscape ? 11.sp : 14.sp,  // 横屏时缩小字体
                          fontWeight: FontWeight.w600,
                        ),
                      ),
              )),
            ],
              ),
              
              SizedBox(height: isLandscape ? 6.h : 24.h),  // 横屏时大幅减少间距
              
              // 专家信息行（只有头像和文字部分可点击）
              Row(
            children: [
              // 可点击区域：头像 + 用户信息
              Expanded(  // ✅ 使用 Expanded 防止溢出
                child: Material(
                  color: Colors.transparent,
                  child: InkWell(
                    onTap: controller.goToMyProfile,
                    borderRadius: BorderRadius.circular(12.r),  // ✅ 使用 .r 适配
                    child: Row(
                      mainAxisSize: MainAxisSize.min,  // 最小尺寸
                      children: [
                        // 头像（白色边框） - 横屏时大幅缩小
                        Container(
                          width: isLandscape ? 36.w : 64.w,   // 横屏时大幅缩小
                          height: isLandscape ? 36.w : 64.w,  // 横屏时大幅缩小
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: Colors.white,
                              width: 3,
                            ),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.15),
                                blurRadius: 12.r,
                                offset: Offset(0, 4.h),
                              ),
                            ],
                          ),
                          child: ClipOval(
                            child: Image.asset(
                              AssetsImages.logoPng,
                              width: isLandscape ? 36.w : 64.w,
                              height: isLandscape ? 36.w : 64.w,
                              fit: BoxFit.cover,
                              errorBuilder: (context, error, stackTrace) {
                                return Container(
                                  color: Colors.white,
                                  child: Icon(
                                    Icons.person,
                                    color: const Color(0xFFD84545),
                                    size: isLandscape ? 20.r : 34.r,  // 横屏时大幅缩小
                                  ),
                                );
                              },
                            ),
                          ),
                        ),
                        SizedBox(width: isLandscape ? 8.w : 16.w),  // 横屏时大幅减少间距
                        
                        // 专家信息 - 使用 Expanded 防止文字溢出
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Obx(() => Text(
                                '${controller.greeting}，${controller.expertDisplayName}',
                                style: TextStyle(
                                  fontSize: isLandscape ? 13.sp : 20.sp,  // 横屏时大幅缩小字体
                                  fontWeight: FontWeight.bold,
                                  color: Colors.white,
                                ),
                                maxLines: 1,  // ✅ 限制最大行数
                                overflow: TextOverflow.ellipsis,  // ✅ 超长省略
                              )),
                              if (controller.isLoggedIn) ...[
                                SizedBox(height: isLandscape ? 2.h : 6.h),  // 横屏时大幅减少间距
                                Text(
                                  _buildExpertSubtitle(),
                                  style: TextStyle(
                                    fontSize: isLandscape ? 10.sp : 14.sp,  // 横屏时大幅缩小字体
                                    color: Colors.white.withOpacity(0.9),
                                    fontWeight: FontWeight.w500,
                                  ),
                                  maxLines: 1,  // ✅ 限制最大行数
                                  overflow: TextOverflow.ellipsis,  // ✅ 超长省略
                                ),
                              ],
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
              ),
              
              // 分隔线（横屏时隐藏以节省空间）
              if (!isLandscape)
                Container(
                  margin: EdgeInsets.symmetric(vertical: 18.h),
                  height: 1,
                  color: Colors.white.withOpacity(0.2),
                ),
              
              // 横屏时只需要小间距
              if (isLandscape)
                SizedBox(height: 6.h),
              
              // 时间信息（不可点击）- 根据屏幕方向决定单行或两行显示
              // 使用 OrientationBuilder 自动响应屏幕方向变化
              OrientationBuilder(
                builder: (context, orientation) {
                  final isLandscape = orientation == Orientation.landscape;
                  debugPrint('🕒 时间信息显示模式: ${isLandscape ? "单行（横屏）" : "两行（竖屏）"}');
                  
                  return Container(
                    padding: EdgeInsets.symmetric(
                      horizontal: isLandscape ? 16.w : 20.w,  // 横屏时减少padding
                      vertical: isLandscape ? 6.h : 14.h,     // 横屏时大幅减少垂直padding
                    ),
                decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.15),
                  borderRadius: BorderRadius.circular(10.r),
                  border: Border.all(
                    color: Colors.white.withOpacity(0.2),
                    width: 1,
                  ),
                ),
                child: isLandscape 
                    ? _buildTimeInfoSingleRow()   // 横屏：单行显示
                    : _buildTimeInfoTwoRows(),    // 竖屏：两行显示
              );
            },
              ),
            ],
          ),
        );
      },
    );
  }

  // 构建评审项目标题（带渐变图标）
  Widget _buildModulesHeader() {
    return Padding(
      padding: EdgeInsets.fromLTRB(10.w, 16.h, 10.w, 12.h),  // ✅ 使用适配
      child: Row(
        children: [
          Container(
            padding: EdgeInsets.all(6.r),  // ✅ 使用 .r 适配
            decoration: BoxDecoration(
              gradient: _primaryGradient,
              borderRadius: BorderRadius.circular(8.r),  // ✅ 使用 .r 适配
              boxShadow: [
                BoxShadow(
                  color: const Color(0xFFD84545).withOpacity(0.3),
                  blurRadius: 8.r,
                  offset: Offset(0, 2.h),
                ),
              ],
            ),
            child: Icon(
              Icons.assignment_rounded,
              color: Colors.white,
              size: 16.r,  // ✅ 使用 .r 适配
            ),
          ),
          SizedBox(width: 10.w),  // ✅ 使用 .w 适配
          Text(
            '评审项目',
            style: TextStyle(
              fontSize: 17.sp,  // ✅ 使用 .sp 适配
              fontWeight: FontWeight.bold,
              color: _textPrimary,
            ),
          ),
        ],
      ),
    );
  }

  // 构建横向网格卡片 - 紧凑样式（✅ 使用 FlutterScreenUtil 适配）
  Widget _buildEvaluationCard(Map<String, dynamic> module, int index) {
    final color = module['color'] as Color;
    final icon = module['icon'] as IconData;
    final title = module['title'] as String;
    final subtitle = module['subtitle'] as String;
    
    // 根据索引选择不同的渐变
    final LinearGradient gradient;
    switch (index) {
      case 0:
        gradient = _blueGradient;
        break;
      case 1:
        gradient = _greenGradient;
        break;
      case 2:
        gradient = _purpleGradient;
        break;
      default:
        gradient = _primaryGradient;
    }
    
    return Expanded(
      child: Container(
        // ✅ 移除固定高度，让内容自适应
        margin: EdgeInsets.only(
          left: index == 0 ? 0 : 6.w,  // ✅ 使用 .w 适配
          right: index == 2 ? 0 : 6.w,
          bottom: 10.h,  // ✅ 使用 .h 适配
        ),
        decoration: BoxDecoration(
          gradient: gradient,
          borderRadius: BorderRadius.circular(12.r),  // ✅ 使用 .r 适配圆角
          boxShadow: [
            BoxShadow(
              color: color.withOpacity(0.3),
              blurRadius: 8.r,
              offset: Offset(0, 2.h),
            ),
          ],
        ),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: () => controller.goToEvaluationDetail(module),
            borderRadius: BorderRadius.circular(12.r),
            child: Padding(
              padding: EdgeInsets.all(12.r),  // ✅ 使用 .r 统一适配内边距
              child: Column(
                mainAxisSize: MainAxisSize.min,  // ✅ 最小高度，防止溢出
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 图标
                  Container(
                    width: 44.w,   // ✅ 使用 .w 适配宽度
                    height: 44.w,  // ✅ 使用 .w 保持正方形
                    decoration: BoxDecoration(
                      color: Colors.white.withOpacity(0.25),
                      borderRadius: BorderRadius.circular(12.r),
                      border: Border.all(
                        color: Colors.white.withOpacity(0.4),
                        width: 1.5,
                      ),
                    ),
                    child: Icon(
                      icon,
                      color: Colors.white,
                      size: 24.r,  // ✅ 使用 .r 适配图标大小
                    ),
                  ),
                  SizedBox(height: 8.h),  // ✅ 使用 .h 适配间距
                  
                  // 标题
                  Text(
                    title,
                    textAlign: TextAlign.center,
                    maxLines: 1,  // ✅ 限制最大行数，防止溢出
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: 14.sp,  // ✅ 使用 .sp 适配字体
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                      height: 1.2,
                    ),
                  ),
                  SizedBox(height: 4.h),  // ✅ 减小间距
                  
                  // 副标题
                  Text(
                    subtitle,
                    textAlign: TextAlign.center,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: 10.sp,  // ✅ 使用 .sp 适配字体
                      color: Colors.white.withOpacity(0.9),
                      height: 1.3,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  SizedBox(height: 6.h),  // ✅ 减小间距
                  
                  // 箭头图标
                  Container(
                    width: 26.w,   // ✅ 使用 .w 适配
                    height: 26.w,  // ✅ 保持正方形
                    decoration: BoxDecoration(
                      color: Colors.white.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(7.r),
                    ),
                    child: Icon(
                      Icons.arrow_forward_rounded,
                      color: Colors.white,
                      size: 14.r,  // ✅ 使用 .r 适配
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  // 构建横向居中网格列表（✅ 使用 FlutterScreenUtil 适配，支持横屏）
  Widget _buildScrollableModulesList() {
    return OrientationBuilder(
      builder: (context, orientation) {
        // 🔥 检测是否为横屏模式
        final isLandscape = orientation == Orientation.landscape;
        debugPrint('📋 评审模块列表布局: ${isLandscape ? "横屏模式（增加边距）" : "竖屏模式"}');
        
        return Obx(() {
          // 这里的 Obx 用于监听 evaluationModules 的变化
          return Container(
            // ✅ 移除固定高度，使用适当的内边距
            padding: EdgeInsets.symmetric(horizontal: isLandscape ? 40.w : 16.w),  // 横屏时增加左右边距
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,  // ✅ 顶部对齐
              children: List.generate(
                controller.evaluationModules.length,
                (index) {
                  final module = controller.evaluationModules[index];
                  return _buildEvaluationCard(module, index);
                },
              ),
            ),
          );
        });
      },
    );
  }

  // 主视图（支持整体滚动）
  Widget _buildView() {
    return RefreshIndicator(
      onRefresh: () async {
        controller.refreshData();
        await Future.delayed(const Duration(seconds: 1));
      },
      child: SingleChildScrollView(
        physics: const AlwaysScrollableScrollPhysics(),
        child: Column(
          children: [
            // 头部专家信息区域
            _buildWelcomeHeader(),
            
            // 内容区域
            SizedBox(height: 16.h),
            
            // 列表标题
            _buildModulesHeader(),
            
            SizedBox(height: 12.h),
            
            // 横向滚动的评审模块列表
            _buildScrollableModulesList(),
            
            SizedBox(height: 20.h),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 设置透明状态栏 - 浅色图标（适用红色渐变背景）
    SystemUIUtils.setTransparentStatusBarLight();
    
    return GetBuilder<HomeIndexController>(
      init: HomeIndexController(),
      id: "home_index",
      builder: (_) {
        return Scaffold(
          backgroundColor: _backgroundColor,
          // 让Body延伸到AppBar下方
          extendBodyBehindAppBar: true,
          appBar: AppBar(
            backgroundColor: Colors.transparent,  // 透明AppBar
            elevation: 0,                         // 无阴影
            automaticallyImplyLeading: false,
            toolbarHeight: 0,  // ✅ AppBar高度设置为0，完全由内容自适应
          ),
          body: _buildView(),
        );
      },
    );
  }
}
